<template>
  <div class="lineChart99" ref="lineChart99"></div>
</template>

<script>
import * as echarts from "echarts";
let options = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      shadowStyle: {
        color: "#ccc",
        opacity: 0.4,
      },
    },
  },
  legend: {
    right: "0%",
    top: "5%",
    icon: "react",
    itemWidth: 24, // 设置宽度
    itemHeight: 10, // 设置高度
    itemGap: 20, // 设置间距
    textStyle: {
      //图例文字的样式
      color: "#000",
      fontSize: 18,
      fontWeight: "bold",
    },
  },
  grid: {
    bottom: 30,
    left: 40,
    right: 30,
    top: 80,
  },
  xAxis: {
    axisLabel: {
      textStyle: {
        //改变刻度字体样式
        color: "#000",
        fontSize: 16,
      },
    }, //刻度标签
    axisLine: {
      lineStyle: {
        color: "#000",
      },
    }, //轴线样式
    axisTick: {
      show: false,
    }, //坐标轴刻度
    data: null,
  },
  yAxis: {
    axisLabel: {
      textStyle: {
        //改变刻度字体样式
        color: "#000",
        fontSize: 16,
      },
    }, //刻度标签
    axisLine: {
      show: false,
    }, //轴线样式
    splitLine: {
      show: true,
      lineStyle: {
        color: "#000",
        type: [6],
      },
    }, //显示分隔线
    axisTick: {
      show: false,
    }, //坐标轴刻度
    type: "value",
  },
  series: [
    {
      name: null,
      color: null,
      type: null,
      data: null,
    },
    {
      name: null,
      color: null,
      type: null,
      data: null,
    },
  ],
};
export default {
  props: {
    echartsData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initchartFn();
    });
  },
  methods: {
    initchartFn() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(this.$refs.lineChart99);
      this.setOptionsFn();
    },
    setOptionsFn() {
      options.xAxis.data = this.echartsData.arr.map((item) => item.name);
      options.series[0].name = this.echartsData.nameArr[0];
      options.series[0].color = this.echartsData.colors[0];
      options.series[0].type = this.echartsData.chartType;
      options.series[0].data = this.echartsData.arr.map((item) => item.value1);

      if (this.echartsData.chartType === "line") {
        let lineStyleItem = {
          width: 6,
        };
        options.series[0].symbolSize = 16;
        options.series[1].symbolSize = 16;
        options.series[0].symbol = "circle";
        options.series[1].symbol = "circle";
        options.series[0].lineStyle = lineStyleItem;
        options.series[1].lineStyle = lineStyleItem;
        options.tooltip.axisPointer = {
          lineStyle: {
            color: "#000",
          },
        };
      }

      options.series[1].name = this.echartsData.nameArr[1];
      options.series[1].color = this.echartsData.colors[1];
      options.series[1].type = this.echartsData.chartType;
      options.series[1].data = this.echartsData.arr.map((item) => item.value2);

      this.chart.setOption(options);
    },
  },
};
</script>

<style lang="less" scoped>
.lineChart99 {
  width: 100%;
  height: 100%;
}
</style>
